<html>
    <head>
        <title>Reporte de contratados</title>
        <!--[if IE]>
        <script type="text/javascript" src="<?php echo base_url() . "3rdparty/svg.js" ?>"  data-path="<?php echo base_url() . "3rdparty/" ?>"></script>
        <![endif]-->
        <meta name="svg.render.forceflash" content="true">
        <script type="text/javascript" src="<?php echo base_url() . "js/protovis-d3.3.js" ?>" ></script>
        <?php $this->load->view('head'); ?>
        <script type="text/javascript">
            $(document).ready(function(){
<?php if(!isset($admin)) $this->load->view('enReady'); ?>
    }); //fin $(document).ready(function(){
        </script>
    </head>
    <body style="text-align: left">
        <?php if($rolId == 4){ ?>
        <div class="divTitulo" style="margin-bottom: 30px">Reporte contratados</div>
        <div style="text-decoration: underline" >En paréntesis número de contratados</div>
        <?php } ?>
        <script type="text/javascript+protovis">
            var data = <?php echo json_encode($procentajes); ?>;
            var nombresBarra = <?php echo json_encode($nombres); ?>;
            var valores = <?php echo json_encode($valores); ?>;
            var columnas = <?php echo $columnas; ?>;
            var w = 100 * columnas,
            h = 420,
            x = pv.Scale.ordinal(pv.range(columnas)).splitBanded(0, w, 4/5),
            y = pv.Scale.linear(0, 100).range(0, 400);

            var vis = new pv.Panel()
            .width(w)
            .height(h)
            .bottom(30)
            .left(20)
            .right(5)
            .top(5);

            var bar = vis.add(pv.Bar)
            .data(data)
            .left(function() x(this.index ) + 25)
            .width(70)
            .bottom(0)
            .height(y);

            bar.anchor("top").add(pv.Label)
            .textStyle("black")
            .textBaseline("bottom")
            .text(function() data[this.index] + "%(" + valores[this.index] + ")");

            bar.anchor("bottom").add(pv.Label)
            .textMargin(5)
            .textBaseline("top")
            .text(function() nombresBarra[this.index]);

            vis.add(pv.Rule)
            .data(y.ticks())
            .bottom(y)
            .strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000")
            .add(pv.Rule)
            .left(19)
            .width(5)
            .strokeStyle("#000")
            .anchor("left").add(pv.Label)
            .text(function(d) d.toFixed(1) + "%");
            vis.render();
        </script>
    </body>
</html>
